<template>
    <div>
      <!-- <PDFViewer class="my-pdf-viewer" container=".my-pdf-viewer" :url="pdf_url" @select="select" @scoll="scoll">
      </PDFViewer> -->
      <SelectSidebar :note="note"></SelectSidebar>
      <span id="Icon" v-if="AddIcon.visiable" style="position: absolute;z-index:100" :style="{ top: AddIcon.top+'px' , left: AddIcon.left + 'px'}" @click="addNote">
        <svg t="1603186520057" class="icon addIcon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4828" width="40" height="40"><path d="M512 1024C229.230592 1024 0 794.769408 0 512S229.230592 0 512 0s512 229.230592 512 512-229.230592 512-512 512z m-42.667008-554.667008H256c-23.564288 0-42.667008 19.10272-42.667008 42.667008s19.10272 42.667008 42.667008 42.667008h213.332992V768c0 23.564288 19.10272 42.667008 42.667008 42.667008s42.667008-19.10272 42.667008-42.667008V554.667008H768c23.564288 0 42.667008-19.10272 42.667008-42.667008S791.564288 469.332992 768 469.332992H554.667008V256c0-23.564288-19.10272-42.667008-42.667008-42.667008S469.332992 232.435712 469.332992 256v213.332992z" p-id="4829" fill="#ffa33e"></path></svg>
      </span>
    </div>
</template>
<script>
import PDFViewer from "./PDFViewer"
import SelectSidebar from './SelectSidebar.vue'

export default {
  name: 'HightLight',
  data(){
    return {
      pdf_url: "东风日产供应商购车指南.pdf",
      AddIcon:{
              top: 0,
              left: 0,
              visiable: false
          },
      note: '',
    }
  },
  methods:{
    //设置按钮位置
    set(val){
      this.AddIcon.top = val.top - 60 //右上
      // this.AddIcon.top = val.top //右下
      this.AddIcon.left = val.left 
      this.AddIcon.visiable = val.visiable
    },
    //添加选取的文字至右侧
    addNote(){
      this.$emit("getNote")//获取选取文字
      this.AddIcon.visiable = false
    },
    //获取pdf滚动事件
    scoll(e){
      this.AddIcon.visiable = false //隐藏按钮
    }
  },
  components: {
    PDFViewer,
    SelectSidebar
  }
}
</script>

<style lang="scss">
.my-pdf-viewer{
  margin-top: 200px;
  height: calc(100vh - 200px);
  overflow: auto;
}
.addIcon{
    cursor: pointer;
}
</style>
